import "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"

function formReg() {
    const uname = $(".lg_uname")
    const tel = $(".lg_tel")
    const password = $(".lg_pwd")
    const repwd = $(".lg_repwd")
    const rule = document.querySelector(".lg_rules")

    const checkspans = $(".lg_form span")
    const register_form = $(".lg_form form")


    // console.log(uname, tel, password, repwd, checkspans)
    // console.log(register_form)

    let userflag = true // 用户名标识
    let telflag = true // 手机号标识
    let pwdflag = true // 密码标识
    let repwdflag = true // 确认密码标识
    let checkflag = true // 注册协议复选框标识


    // 表单验证过程
    // 1. 用户名验证  -- 长度2-16位字符检测+重名检测
    uname.on("focus", function() {
        checkspans.eq(0).css("color", "blue").html("中英文及数字均可，长度2-16位字符")
    })

    uname.on("blur", function() {
        let unameValue = $(this).val()
        if (unameValue !== "") {
            let len = unameValue.replace(/[\u4e00-\u9fa5]/g, "**").length
            if (len >= 2 && len <= 16) {
                let reg = /^[a-zA-Z\u4e00-\u9fa5\d]+$/
                if (reg.test(unameValue)) {
                    // 进行同名检测，发送ajax请求
                    $.ajax({
                        type: 'post',
                        url: 'http://10.31.155.75/mogujie/php/registry.php',
                        data: {
                            uname: unameValue
                        }
                    }).done(function(data) {
                        if (data === 'false') {
                            checkspans.eq(0).css("color", "green").html("用户名格式正确√")
                            userflag = true
                        } else {
                            checkspans.eq(0).css("color", "red").html("用户名已存在,请更换用户名")
                            userflag = false
                        }
                    })
                } else {
                    checkspans.eq(0).css("color", "red").html("用户名格式存在问题,请修改！")
                    userflag = false
                }
            } else {
                checkspans.eq(0).css("color", "red").html("长度有问题(2-16位字符,中文代表2位字符)")
                userflag = false
            }
        } else {
            checkspans.eq(0).css("color", "red").html("用户名不能为空")
            userflag = false
        }
    })

    // 2. 手机号验证 -- 长度必须为11位 + 重名检测
    tel.on("focus", function() {
        checkspans.eq(1).css("color", "blue").html("请输入11位数字且存在的手机号码")
    })

    tel.on("blur", function() {
        let telValue = $(this).val()
        if (telValue !== "") {
            let reg = /^1[3456789]\d{9}$/
            if (reg.test(telValue)) {
                $.ajax({
                    type: 'post',
                    url: 'http://10.31.155.75/mogujie/php/registry.php',
                    data: {
                        tel: telValue
                    }
                }).done(function(data) {
                    if (data === 'false') {
                        checkspans.eq(1).css("color", "green").html("手机号码格式正确√")
                        telflag = true
                    } else {
                        checkspans.eq(1).css("color", "red").html("该手机号码已被注册,请更换手机号")
                        telflag = false
                    }
                })
            } else {
                checkspans.eq(1).css("color", "red").html("手机号码格式有误,请重新输入")
                telflag = false
            }
        } else {
            checkspans.eq(1).css("color", "red").html("手机号码不能为空")
            telflag = false
        }
    })

    // 3. 密码验证 -- 密码长度6-25位检测 + 密码强度检测
    password.on("focus", function() {
        checkspans.eq(2).css("color", "blue").html("请输入6-25位任意字符组成的密码")
    })

    password.on("input", function() {
        let reg1 = /[0-9]+/
        let reg2 = /[a-z]+/
        let reg3 = /[A-Z]+/
        let reg4 = /[\W_]+/ // 特殊字符
        let num = 0
        if (reg1.test($(this).val())) { num++ }
        if (reg2.test($(this).val())) { num++ }
        if (reg3.test($(this).val())) { num++ }
        if (reg4.test($(this).val())) { num++ }
        switch (num) {
            case 1:
                checkspans.eq(2).html("<i>弱</i><i>中</i><i>强</i>")
                $(".password span i:nth-child(1)").css("backgroundColor", "red")
                pwdflag = false
                break
            case 2:
            case 3:
                checkspans.eq(2).html("<i>弱</i><i>中</i><i>强</i>")
                $(".password span i:nth-child(2)").css("backgroundColor", "orange")
                pwdflag = true
                break
            case 4:
                checkspans.eq(2).html("<i>弱</i><i>中</i><i>强</i>")
                $(".password span i:nth-child(3)").css("backgroundColor", "green")
                pwdflag = true
                break
        }
    })

    password.on("blur", function() {
        let pwdValue = $(this).val()
        if (pwdValue !== "") {
            if (pwdValue.length >= 6 && pwdValue.length <= 25) {
                if (pwdflag) {
                    checkspans.eq(2).css("color", "green").html("密码格式正确√")
                } else {
                    checkspans.eq(2).css("color", "red").html("密码强度过低，建议您加强密码强度")
                }
            } else {
                checkspans.eq(2).css("color", "red").html("密码长度有误,请控制在6-25位之间")
                pwdflag = false
            }
        } else {
            checkspans.eq(2).css("color", "red").html("密码不能为空")
            pwdflag = false
        }
    })

    // 4. 确认密码验证 -- 检测确认密码是否与之前输入的密码一致
    repwd.on("focus", function() {
        checkspans.eq(3).css("color", "blue").html("请再次确认密码")
    })

    repwd.on("blur", function() {
        let repwdValue = $(this).val()
        if (repwdValue !== "") {
            if (password.val() === repwdValue) {
                checkspans.eq(3).css("color", "green").html("密码确认正确√")
                repwdflag = true
            } else {
                checkspans.eq(3).css("color", "red").html("两次密码输入不一致，请重新确认")
                repwdflag = false
            }
        } else {
            checkspans.eq(3).css("color", "red").html("确认密码不能为空")
            repwdflag = false
        }
    })

    // 5. 注册协议的勾选 -- 检测复选框是否被选中
    rule.onclick = function() {
        if (rule.checked) {
            checkspans.eq(4).html("")
            checkflag = true
        } else {
            checkspans.eq(4).css("color", "red").html("请认真阅读注册协议并勾选按钮")
            checkflag = false
        }
    }

    register_form.on("submit", function() {
        if (uname.val() === "") {
            checkspans.eq(0).css("color", "red").html("用户名不能为空")
            userflag = false
        }
        if (tel.val() === "") {
            checkspans.eq(1).css("color", "red").html("手机号码不能为空")
            telflag = false
        }
        if (password.val() === "") {
            checkspans.eq(2).css("color", "red").html("密码不能为空")
            pwdflag = false
        }
        if (repwd.val() === "") {
            checkspans.eq(3).css("color", "red").html("确认密码不能为空")
            repwdflag = false
        }
        if (!rule.checked) {
            checkspans.eq(4).css("color", "red").html("请认真阅读注册协议并勾选按钮")
            checkflag = false
        }

        if (!userflag || !telflag || !pwdflag || !repwdflag || !checkflag) {
            return false
        }
    })
}

export {
    formReg
}